{% extends "accounts/ProfileBase.html" %}

{% block profile %}

<script>
    $(document).ready(function(){
        $("#profile_detail").attr("class", "active");
    })
</script>

<div class="session-form alt">
    <form accept-charset="UTF-8" action="/accounts/profile/" class="gen-form with-messages" id="edit_user_380541" method="post">
        <div style="margin:0;padding:0;display:inline">
            {% csrf_token %}
            <input name="utf8" value="✓" type="hidden">
            <input name="_method" value="put" type="hidden">
        </div>			

        <div class="form-field">
            <fieldset class="user_email"><label for="user_email">Email</label><input id="user_email" label="Email" name="email" size="30" value="{{request.user.email}}" type="text"></fieldset>

        </div>

        <div class="form-field">
            <fieldset class="user_location"><label for="user_location">住址</label><input id="user_location" name="addr" size="30" value="{{request.user.profile.location}}" type="text"></fieldset>
            <p class="message">填写您的大概住址，有助于增强邻里互信</p>
        </div>

        <div class="form-field form-field-bio">
            <fieldset class="user_bio"><label for="user_bio">签名</label><textarea class="bio" cols="40" id="user_bio" label="Bio" name="desc" rows="20">{{request.user.profile.desc}}</textarea><span class="counter">160</span></fieldset>
            <p class="message">随便写点啥吧，让我认出人群中唯一的你</p>
        </div>

        <div class="form-btns">
            <input class="form-sub" name="commit" value="保存设置" type="submit">
        </div>
    </form>	
</div>

{% endblock %}


{% block rightside %}

{% load upload %}
<div class="secondary">
    <h3><span class="meta">您的</span> 头像</h3>

    <div id="avatar-preview" class="group">
        <form accept-charset="UTF-8" action="/account/avatar" class="edit_user" id="delete-avatar-form" method="post">
            {% csrf_token %}
            <div data-picture="" data-alt="{{request.user.username}}" data-class="photo">
                <div data-src="/static/{{avatar}}" ></div>
                <div data-src="/static/{{avatar}}" data-media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx)"></div>

                <noscript>
                    <img alt="{{request.user.username}}" class="photo" src="/static/images/avatar-default.gif?1375462267" />
                </noscript>

                <img src="/static/images/avatar-default.gif" class="photo" alt="{{request.user.username}}"></div>
			    <a style="display: block;" href="http://dribbble.com/account/avatar" class="action edit-avatar" id="edit_avatar_link">修改头像</a>

        </form>

        <form accept-charset="UTF-8" action="/upload/image/" class="group" enctype="multipart/form-data" id="avatar-form" method="post" style="display:none;">
            {% csrf_token %}
            {% upload for request.user %}
            <input type="hidden" name="redirect_to" value="/accounts/profile/?p=avatar" />
            <fieldset id="upload">
                <input id="user_avatar" name="image" type="file">
                <p class="info">JPG, GIF or PNG. 最大不超过 700K</p>
            </fieldset>

            <div id="add-btn">
                <input class="form-sub" name="commit" value="上传" type="submit">
                <a href="#canel-avatar" class="form-btn" id="cancel-avatar">取消</a>
            </div>
        </form>	
    </div>
</div>
{% endblock %}


{% block endscript %}
<script>

new ShowAndHideControl({
	target: '#avatar-form',
	showControl: '#edit_avatar_link',
	hideControl: '#cancel-avatar'
});

$('#delete-avatar-button').click(function() {
	return confirm("Deleting avatar. Continue?");
});

$('.player-card h3 a').
	tipsy({
		gravity: 'e',
		html: true,
		title: function() { return $('#player-card-tipsy-text').html(); }
	}).
	click(function() { return false; });
</script>
<script>
$('#user_login')
	// Show the input username in the user url (or default text if none)
	.keyup(function() {
		var value = $(this).val();
		if (value == '') {
			value = 'USERNAME';
		}
		$('#username').text(value);
	});
</script>
<script src="/static/js/charCount.js" type="text/javascript"></script><script>
$('.form-field .bio').charCount({allowed: 160, warning: 20});
</script>

{% endblock %}

